<template>
  <el-button plain @click="addCard(0)" type="primary"> 新增分类 </el-button>

  <Dialog
    :dialogVisible="dialogVisible"
    @close="close"
    ref="childenRef"
    :list="list"
    :id="inid"
    @add="add"
    :good="good"
  ></Dialog>

  <el-table
    :data="tree"
    style="width: 100%; margin-bottom: 20px"
    row-key="id"
    border
    default-expand-all
    height="800"
  >
    <el-table-column fixed prop="name" label="分类名称" sortable />
    <el-table-column label="分类级别" sortable>
      <template #default="scope">
        <span v-if="scope.row.pid === 0">一级标签</span>
        <span v-else>二级标签</span>
      </template>
    </el-table-column>
    <el-table-column prop="id" label="分类编号" sortable />
    <el-table-column label="分类图片" sortable>
      <template #default="scope">
        <img
          v-if="scope.row.picture"
          :src="'http://localhost:5173/' + scope.row.picture"
          width="100px"
        />
      </template>
    </el-table-column>
    <el-table-column label="操作" sortable>
      <template #default="scope">
        <el-button type="warning" @click="addCard(scope.row.id)"
          >编辑</el-button
        >
        <el-button type="danger" @click="dell(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { getAllList, del, getGood } from '../api/api';
import Dialog from './Dialog.vue';
import message from '../utils/message.js';

const getList = async () => {
  try {
    const resp = await getAllList();
    if (Array.isArray(resp)) {
      return resp;
    } else {
      console.error('Response is not an array:', resp);
    }
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

const list = ref([]);
const good = ref({});

onMounted(async () => {
  falshList();
});

const falshList = async () => {
  list.value = await getList();
  tree.value = convertToTree(list.value);
};

const convertToTree = (data) => {
  const treeData = [];
  const map = {};
  // 遍历一维数组数据，建立节点映射表
  for (const item of data) {
    map[item.id] = { ...item, children: [] };
  }
  // 遍历映射表，将节点添加到父节点的 children 中
  for (const item of data) {
    const node = map[item.id];
    if (item.pid === 0) {
      treeData.push(node);
    } else {
      const parent = map[item.pid];
      parent.children.push(node);
    }
  }

  return treeData;
};

const tree = ref([]);
const dialogVisible = ref(false);

const childenRef = ref(null);

const inid = ref(0);

const addCard = async (id) => {
  inid.value = id;
  if (id !== 0) {
    good.value = await getGood(id); // 获取商品详情并赋值给 good
  } else {
    good.value = {}; // 新增时清空 good
  }
  dialogVisible.value = true;
};

const close = () => {
  dialogVisible.value = false;
};

const add = () => {
  dialogVisible.value = false;
  falshList();
};

const dell = async (id) => {
  const delt = tree.value.find((it) => it.id == id);
  if (!(delt && delt.children.length)) {
    await del(id);
    falshList();
  } else {
    message({
      message: '不允许删除存在二级标签的一级标签',
      type: 'warning'
    });
  }
};
</script>


<style scoped>
</style>